<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Notes</title>
    <!-- 添加marked.js库用于Markdown解析 -->
    <script src="https://cdn.staticfile.org/marked/4.3.0/marked.min.js"></script>
    <style>
        /* 通用样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .note-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 修改为显示4个卡片 */
            gap: 20px; /* 卡片之间的间距 */
            padding: 20px;
            margin-bottom: 60px; /* 为底部导航栏留出空间 */
        }
        .note-item {
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            padding: 20px;
            background: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .note-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        .note-item .note-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }
        .note-item .note-header span {
            font-weight: 600;
        }
        .note-item .note-content {
            font-size: 16px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 15px;
            font-weight: 500;
            overflow: hidden; /* 防止内容溢出 */
            text-overflow: ellipsis; /* 使用省略号 */
            display: -webkit-box;
            -webkit-line-clamp: 3; /* 限制显示的行数 */
            -webkit-box-orient: vertical;
        }
        .note-item .note-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: auto; /* 将标签固定在卡片底部 */
        }
        .note-item .note-tags span {
            background-color: #007bff;
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        .note-item .note-tags span:hover {
            background-color: #0056b3;
            transform: scale(1.1);
        }

        /* Web 端顶部导航栏样式 */
        .web-top-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: #ffffff; /* 白色背景 */
            border-bottom: 1px solid #e0e0e0; /* 底部边框 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        }
        .web-top-nav .logo {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        .web-top-nav .logo img {
            height: 24px;
            margin-right: 8px; /* 图标与文字间距 */
        }
        .web-top-nav .search {
            display: flex;
            align-items: center;
            gap: 5px; /* 减少搜索按钮与输入框之间的间距 */
        }
        .web-top-nav .search input {
            width: 0;
            padding: 5px 10px;
            border: 1px solid #ccc;
            border-radius: 20px;
            outline: none;
            font-size: 14px;
            transition: width 0.3s ease;
            opacity: 0;
        }
        .web-top-nav .search input.active {
            width: 200px; /* 展开后的宽度 */
            opacity: 1;
        }
        .web-top-nav .search button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            color: #333;
        }
        .web-top-nav .search button:hover {
            color: #007bff;
        }
        .web-top-nav .links {
            display: flex;
            align-items: center;
            gap: 15px; /* 减少链接之间的间距 */
            margin-left: 10px; /* 调整与搜索框的间距 */
        }
        .web-top-nav .links a {
            display: flex;
            align-items: center;
            gap: 5px; /* 图标与文字之间的间距 */
            text-decoration: none;
            color: #333;
            font-size: 14px;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .web-top-nav .links a:hover {
            color: #007bff; /* 悬停效果 */
        }
        .web-top-nav .links a .icon {
            font-size: 16px; /* 图标大小 */
        }

        /* App 端顶部导航栏样式 */
        .app-top-nav {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #007bff;
            color: white;
            text-align: center;
            padding: 10px 0;
            z-index: 1000;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .app-top-nav a {
            color: white;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            padding: 5px 10px;
        }
        .app-top-nav a.active {
            border-bottom: 2px solid white;
        }
        .app-top-nav a:hover {
            opacity: 0.8;
        }

        /* 美化底部导航栏 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f8f8f8;
            border-top: 1px solid #ddd;
            padding: 5px 0;
        }
        .bottom-nav a {
            flex: 1;
            text-align: center;
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        .bottom-nav a.active {
            color: #007bff;
        }
        .bottom-nav a .icon {
            display: block;
            font-size: 20px;
            margin-bottom: 5px;
        }

        /* Web 端样式 */
        @media (min-width: 768px) {
            .app-top-nav {
                display: none;
            }
            .bottom-nav {
                display: none; /* 隐藏底部导航栏 */
            }
        }

        /* 大屏幕显示4个卡片一行 */
        @media (min-width: 1200px) {
            .note-list {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* App 端样式 */
        @media (max-width: 767px) {
            .web-top-nav {
                display: none;
            }
            .note-list {
                margin-top: 50px;
                margin-bottom: 60px; /* 为底部导航栏留出空间 */
            }
        }

        .note-footer {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: 15px;
            font-size: 14px;
            color: #666;
            gap: 10px; /* 增加行间距 */
        }
        .note-footer .stats {
            display: flex;
            gap: 15px; /* 增加图标之间的间距 */
        }
        .note-footer .published {
            font-size: 12px;
            color: #888;
            text-align: right;
            width: 100%; /* 让发布时间独占一行 */
        }

        /* 添加按钮样式 */
        .add-button {
            position: fixed;
            bottom: 80px; /* 移动端底部导航栏上方一些 */
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: #007bff;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
            text-decoration: none;
        }

        .add-button:hover {
            transform: scale(1.1);
            background-color: #0062cc;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }

        /* 让按钮在Web端位置更合适 */
        @media (min-width: 768px) {
            .add-button {
                bottom: 30px;
                right: 30px;
            }
        }
    </style>
</head>
<body>
    <!-- Web 端顶部导航栏 -->
    <div id="header"></div>

    <!-- App 端顶部导航栏 -->
    <div class="app-top-nav">
        <a href="local-notes.html">本地</a>
        <a href="online-notes.html" class="active">在线</a>
        <a href="search.html">搜索</a>
    </div>

    <!-- 笔记列表 -->
    <div class="note-list">
        <!-- Notes will be dynamically rendered here -->
    </div>

    <!-- 添加笔记按钮 -->
    <a href="note-add.html" class="add-button">+</a>

    <!-- 引入底部导航栏 -->
    <div>
        <div class="bottom-nav">
            <a href="local-notes.html">
                <span class="icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="messages.html">
                <span class="icon">💬</span>
                <span>消息</span>
            </a>
            <a href="login.html">
                <span class="icon">👤</span>
                <span>个人</span>
            </a>
        </div>
    </div>

    <script>
        // Load shared header
        document.addEventListener("DOMContentLoaded", () => {
            // 配置Marked选项
            marked.setOptions({
                breaks: true,           // 支持GitHub换行符
                gfm: true,              // 启用GitHub风格Markdown
                sanitize: false,        // 不过滤HTML标签
                smartLists: true        // 使用更智能的列表行为
            });
            
            fetch("header.html")
                .then(response => response.text())
                .then(html => {
                    document.getElementById("header").innerHTML = html;

                    // Add event listeners for the search box after the header is loaded
                    const searchButton = document.querySelector('.web-top-nav .search button');
                    const searchInput = document.querySelector('.web-top-nav .search input');

                    if (searchButton && searchInput) {
                        searchButton.addEventListener('click', () => {
                            if (!searchInput.classList.contains('active')) {
                                searchInput.classList.add('active');
                                searchInput.focus();
                            } else {
                                console.log('Searching:', searchInput.value);
                            }
                        });

                        document.addEventListener('click', (e) => {
                            if (!e.target.closest('.search')) {
                                searchInput.classList.remove('active');
                            }
                        });
                    }
                });
        });

        const onlineNotes = [
            {
                id: crypto.randomUUID(),
                title: "Markdown完全学习指南",
                content: `# Markdown完全学习指南

## 什么是Markdown？

Markdown是一种轻量级标记语言，创建于2004年，如今已成为世界上最受欢迎的标记语言之一。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的HTML文档。

> Markdown的目标是实现「易读易写」。  
> —— John Gruber（Markdown创始人）

## 为什么要学习Markdown？

- **简洁高效**：让你专注于内容创作而非格式
- **兼容性强**：几乎所有博客、笔记应用都支持
- **可移植性**：纯文本，跨平台，永不过时
- **多用途**：可以用于写文档、笔记、博客、电子书等

## Markdown基础语法

### 1. 标题

Markdown使用\`#\`符号来表示标题，级别从1到6：

\`\`\`
# 一级标题
## 二级标题 
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
\`\`\`

### 2. 段落与换行

段落之间空一行即可。

如果想要在段落内换行，可以在行末加入两个空格，  
就像这样。

### 3. 强调语法

*这是斜体文本*
_这也是斜体文本_

**这是粗体文本**
__这也是粗体文本__

***这是粗斜体文本***
___这也是粗斜体文本___

### 4. 列表

#### 无序列表

- 项目1
- 项目2
  - 子项目A
  - 子项目B
- 项目3

#### 有序列表

1. 第一步
2. 第二步
3. 第三步
   1. 子步骤A
   2. 子步骤B

### 5. 链接

[Markdown官方网站](https://daringfireball.net/projects/markdown/)

### 6. 图片

![Markdown Logo](https://markdown-here.com/img/icon256.png)

### 7. 引用

> 这是一个引用。
>
> 这是引用的第二段。
>
>> 这是嵌套引用。

### 8. 代码

行内代码使用反引号包裹：\`const message = "Hello World";\`

代码块使用三个反引号：

\`\`\`javascript
function greet(name) {
  return \`Hello, \${name}!\`;
}

console.log(greet("Markdown"));
\`\`\`

### 9. 水平线

三个或更多的短横线、星号或下划线：

---

### 10. 表格

| 姓名   | 年龄 | 职业      |
|--------|------|-----------|
| 张三   | 28   | 开发工程师 |
| 李四   | 32   | 产品经理   |
| 王五   | 25   | UI设计师   |

## 扩展语法

### 1. 任务列表

- [x] 完成任务
- [ ] 未完成任务
- [ ] 另一个未完成任务

### 2. 删除线

~~这是删除线文本~~

### 3. 脚注

这里有一个脚注[^1]。

[^1]: 这是脚注的内容。

### 4. 数学公式（需支持LaTeX）

行内公式：$E=mc^2$

独立公式：
$$
\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}
$$

### 5. 流程图（部分平台支持）

\`\`\`mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
\`\`\`

## 在不同平台中使用Markdown

Markdown被广泛应用于各种平台和工具中：

1. **GitHub/GitLab** - 用于README文件和项目文档
2. **Notion** - 笔记和知识库管理
3. **简书/掘金/知乎** - 内容创作和博客
4. **VS Code/Typora** - 专业的Markdown编辑
5. **Obsidian** - 知识连接和笔记管理

## 最佳实践

- 保持语法简单一致
- 合理使用标题层级
- 善用列表和表格组织信息
- 适当添加空行提高可读性
- 使用预览功能检查排版效果

## 高级技巧

### 在表格中使用格式化文本

| 功能 | 语法 | 效果 |
|------|------|------|
| 粗体 | \`**文本**\` | **文本** |
| 斜体 | \`*文本*\` | *文本* |
| 行内代码 | \`\`代码\`\` | \`代码\` |

### 使用HTML进行更复杂的排版

Markdown支持内嵌HTML：

<div align="center">
  <p>居中对齐的文字</p>
  <img src="https://markdown-here.com/img/icon256.png" width="100" />
</div>

<details>
  <summary>点击展开详情</summary>
  这里是详细内容，可以包含任何Markdown语法。
  
  - 列表项1
  - 列表项2
</details>

## 常见问题解答

**Q: Markdown能完全替代Word吗？**  
A: 不能。Markdown适合简单的文档编写，但对于需要复杂排版的场景，Word仍然更适合。

**Q: 如何在Markdown中插入视频？**  
A: Markdown本身不支持直接插入视频，但你可以：
1. 使用视频截图+链接
2. 内嵌HTML（如YouTube嵌入代码）

**Q: 不同的Markdown解析器有什么区别？**  
A: 不同的解析器可能对一些扩展语法支持不同，如表格、删除线、任务列表等。基础语法都是一致的。

## 结语

Markdown是一种简单而强大的写作工具，掌握它将大大提高你的文档编写效率。希望这份指南能帮助你开始Markdown之旅！

---

*最后更新: 2023年9月15日*`,
                tags: ["Markdown", "教程", "写作"],
                likes: 842,
                favorites: 513,
                downloads: 346,
                author: "马克小明",
                publishedAt: new Date().toLocaleString()
            },
            {
                id: crypto.randomUUID(),
                title: "Collaborative Project",
                content: "🌐 This is the first online note. It contains collaborative project details.",
                tags: ["collaboration", "project"],
                likes: 150,
                favorites: 60,
                downloads: 40,
                author: "Alice Johnson",
                publishedAt: new Date().toLocaleString()
            },
            {
                id: crypto.randomUUID(),
                title: "Webinar Summary",
                content: "📖 This is the second online note. It includes a summary of a recent webinar.",
                tags: ["webinar", "summary"],
                likes: 90,
                favorites: 30,
                downloads: 20,
                author: "John Doe",
                publishedAt: new Date().toLocaleString()
            },
            {
                id: crypto.randomUUID(),
                title: "AI技术研究笔记",
                content: "# 人工智能在医疗领域的应用\n\n## 研究背景\n人工智能技术正在彻底改变医疗保健行业，从诊断到治疗计划，再到患者监测。\n\n## 主要技术\n- 图像识别与分析\n- 自然语言处理\n- 预测分析模型\n\n> 注意：这些技术需要大量高质量的医疗数据支持。",
                tags: ["AI", "医疗", "研究"],
                likes: 328,
                favorites: 145,
                downloads: 87,
                author: "张智能",
                publishedAt: new Date().toLocaleString()
            },
            {
                id: crypto.randomUUID(),
                title: "Web3.0开发指南",
                content: "# Web3.0开发完全指南\n\n## 区块链基础\n区块链是分布式账本技术，具有去中心化、不可篡改等特性。\n\n```javascript\n// 简单的智能合约示例\ncontract SimpleStorage {\n    uint storedData;\n    \n    function set(uint x) public {\n        storedData = x;\n    }\n    \n    function get() public view returns (uint) {\n        return storedData;\n    }\n}\n```\n\n## 实用工具\n1. **Metamask** - 浏览器钱包扩展\n2. **Truffle** - 开发框架\n3. **Hardhat** - 测试环境",
                tags: ["区块链", "Web3", "开发"],
                likes: 245,
                favorites: 189,
                downloads: 132,
                author: "李区块",
                publishedAt: new Date().toLocaleString()
            },
            {
                id: crypto.randomUUID(),
                title: "现代诗歌创作集",
                content: "# 城市印象\n\n*雨后的街道*\n\n```\n钢铁森林中的雨滴\n敲打着城市的窗户\n行人匆匆，伞花绽放\n霓虹映照，倒影斑斓\n```\n\n## 创作灵感\n\n现代都市生活给诗歌创作带来了新的题材和表现形式。通过观察城市的日常景象，可以发现诗意与美感。",
                tags: ["文学", "诗歌", "艺术"],
                likes: 176,
                favorites: 98,
                downloads: 42,
                author: "王诗人",
                publishedAt: new Date().toLocaleString()
            },
            {
                id: crypto.randomUUID(),
                title: "健康饮食计划",
                content: "# 均衡饮食指南\n\n## 每日营养摄入建议\n\n| 营养素 | 推荐摄入量 | 主要来源 |\n|-------|------------|--------|\n| 蛋白质 | 56-91克 | 鱼、肉、蛋、豆制品 |\n| 碳水化合物 | 250-325克 | 全谷物、薯类、豆类 |\n| 脂肪 | 44-78克 | 坚果、植物油、鱼油 |\n| 膳食纤维 | 25-30克 | 蔬菜、水果、全谷物 |\n\n> 重要提示：以上建议适用于一般成年人，特殊人群应咨询专业营养师定制方案。",
                tags: ["健康", "饮食", "营养"],
                likes: 419,
                favorites: 276,
                downloads: 203,
                author: "刘营养师",
                publishedAt: new Date().toLocaleString()
            },
            {
                id: crypto.randomUUID(),
                title: "全球旅行日记",
                content: "# 意大利佛罗伦萨之旅\n\n![佛罗伦萨全景](https://images.unsplash.com/photo-1516186366443-0744a82baeef)\n\n## 旅行亮点\n\n1. **乌菲兹美术馆** - 文艺复兴艺术的宝库\n2. **圣母百花大教堂** - 哥特式建筑的杰作\n3. **老桥** - 横跨阿尔诺河的中世纪石桥\n\n### 美食推荐\n\n- 佛罗伦萨牛排 (Bistecca alla Fiorentina)\n- 托斯卡纳面包汤 (Ribollita)\n- 意式冰淇淋 (Gelato)",
                tags: ["旅行", "文化", "探索"],
                likes: 512,
                favorites: 384,
                downloads: 167,
                author: "陈旅行",
                publishedAt: new Date().toLocaleString()
            },
            {
                id: crypto.randomUUID(),
                title: "移动应用设计趋势",
                content: "# 2023移动UI/UX设计趋势\n\n## 1. 暗黑模式普及化\n\n暗黑模式不仅美观，还能节省电量，减轻用户眼睛疲劳。\n\n## 2. 微交互增强体验\n\n```css\n/* 按钮微交互动画 */\n.button {\n  transition: transform 0.3s ease;\n}\n\n.button:hover {\n  transform: scale(1.05);\n}\n```\n\n## 3. 3D元素融入平面设计\n\n立体元素为扁平化设计增添空间感与层次感。",
                tags: ["设计", "UI/UX", "移动应用"],
                likes: 287,
                favorites: 196,
                downloads: 124,
                author: "赵设计",
                publishedAt: new Date().toLocaleString()
            },
            {
                id: crypto.randomUUID(),
                title: "金融投资策略",
                content: "# 个人投资组合优化指南\n\n## 资产配置基本原则\n\n- **分散投资** - 不要把所有鸡蛋放在一个篮子里\n- **长期持有** - 时间是投资者最好的朋友\n- **定期再平衡** - 保持投资组合的风险水平\n\n## 投资组合示例\n\n| 资产类别 | 保守型 | 平衡型 | 积极型 |\n|---------|-------|-------|-------|\n| 股票    | 30%   | 60%   | 80%   |\n| 债券    | 50%   | 30%   | 10%   |\n| 现金    | 15%   | 5%    | 5%    |\n| 其他    | 5%    | 5%    | 5%    |",
                tags: ["金融", "投资", "理财"],
                likes: 356,
                favorites: 234,
                downloads: 178,
                author: "钱专家",
                publishedAt: new Date().toLocaleString()
            },
            {
                id: crypto.randomUUID(),
                title: "可持续发展报告",
                content: "# 企业可持续发展实践指南\n\n## 环境责任\n\n> \"我们不是从祖先那里**继承**地球，而是从子孙后代那里**借用**地球。\"\n\n## 可持续发展目标 (SDGs)\n\n1. 减少碳排放\n2. 资源循环利用\n3. 保护生物多样性\n\n## 成功案例分析\n\n### 案例1：循环包装系统\n\n通过可重复使用的包装容器，减少包装垃圾，节约资源。实施一年后，塑料使用量减少80%。",
                tags: ["可持续", "环保", "企业责任"],
                likes: 198,
                favorites: 87,
                downloads: 65,
                author: "林环保",
                publishedAt: new Date().toLocaleString()
            }
        ];

        function renderOnlineNotes() {
            const noteList = document.querySelector(".note-list");
            noteList.innerHTML = ""; // Clear existing notes

            onlineNotes.forEach(note => {
                const noteItem = document.createElement("div");
                noteItem.classList.add("note-item");

                // 从Markdown内容中提取预览
                let contentPreview = "";
                if (note.content.startsWith("#") || note.content.includes("\n")) {
                    // 提取纯文本预览，去除Markdown语法
                    contentPreview = note.content
                        .replace(/#+\s+/g, '') // 移除标题标记
                        .replace(/\*\*|\*|~~|__/g, '') // 移除强调标记
                        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // 移除链接，保留文本
                        .replace(/!\[([^\]]+)\]\([^)]+\)/g, '[图片]') // 替换图片
                        .replace(/```[\s\S]*?```/g, '[代码块]') // 替换代码块
                        .replace(/`([^`]+)`/g, '$1') // 移除行内代码标记
                        .replace(/\n/g, ' ') // 替换换行为空格
                        .substring(0, 150) + (note.content.length > 150 ? '...' : ''); // 裁剪长度
                } else {
                    // 对于简单内容直接显示
                    contentPreview = note.content;
                }

                noteItem.innerHTML = `
                    <div class="note-header">
                        <span><strong>Author:</strong> ${note.author}</span>
                    </div>
                    <h3 class="note-title">${note.title}</h3>
                    <div class="note-content">${contentPreview}</div>
                    <div class="note-tags">
                        ${note.tags.map(tag => `<span>${tag}</span>`).join("")}
                    </div>
                    <div class="note-footer">
                        <div class="stats">
                            <span>👍 ${note.likes}</span>
                            <span>⭐ ${note.favorites}</span>
                            <span>⬇️ ${note.downloads}</span>
                        </div>
                        <span class="published"><strong>Published:</strong> ${note.publishedAt}</span>
                    </div>
                `;

                // 添加点击事件，跳转到笔记详情页
                noteItem.addEventListener('click', () => {
                    window.location.href = `note-detail.html?id=${note.id}`;
                });
                
                // 添加鼠标样式，表明可点击
                noteItem.style.cursor = 'pointer';

                noteList.appendChild(noteItem);
            });
        }

        document.addEventListener("DOMContentLoaded", () => {
            renderOnlineNotes();
            
            // 将笔记数据保存到localStorage，以便详情页访问
            localStorage.setItem('onlineNotes', JSON.stringify(onlineNotes));

            const localLink = document.querySelector(".bottom-nav a:nth-child(1)");
            const onlineLink = document.querySelector(".bottom-nav a:nth-child(2)");
            const messagesLink = document.querySelector(".bottom-nav a:nth-child(2)");

            // Redirect to local notes page
            localLink.addEventListener("click", (e) => {
                e.preventDefault();
                window.location.href = "local-notes.html";
            });

            // Redirect to online notes page
            onlineLink.addEventListener("click", (e) => {
                e.preventDefault();
                window.location.href = "online-notes.html";
            });

            if (messagesLink) {
                messagesLink.addEventListener("click", (e) => {
                    e.preventDefault();
                    window.location.href = "messages.html";
                });
            }
        });
    </script>
</body>
</html>
